<template>
    <div class="bridal-shop-index">
        <Banner :banners="indexBanners" />
        <!-- <TabBox type="w6" :tabs="tabs" route-type="redirect"/> -->
        <!-- <div class="hot-recommend">
            <LineTitle value="热门推荐" :hasPad="true" />
        </div>-->

        <div class="classification_tabBox">
            <div class="classification">
                <div class="classification_slideBox">
                    <div class="classification_slideBox_item" :class="selectOne == sliderIndex?'classification_slideBox_item_active':''" v-for="(sliderItem,sliderIndex) in getSliderList" :key="sliderIndex" @click="onClickTab(sliderItem.name,sliderIndex)">
                        {{sliderItem.name}}
                        <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/fenlei_active.png" v-show="selectOne == sliderIndex" class="classification_slideBox_item_activeIcon">
                    </div>
                </div>
                <div class="sliderBtn" @click="onClickOpenTab()">
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/fenlei.png" class="sliderBtn_icon" alt="">
                    分类
                </div>
            </div>
            <div class="sortBox_po" v-show="isShowsliderTab"  @click="onCalcelOpenTab">
                <div class="sortBox_po_tabBox">
                    <div class="sortBox_po_tabBox_lump" :class="selectOne == sliderIndex2?'classification_slideBox_item_active':''" v-for="(sliderItem2,sliderIndex2) in getSliderList" :key="sliderIndex2" @click.stop="onClickTab(sliderItem2.name,sliderIndex2)">{{sliderItem2.name}}</div>
                </div>
            </div>
        </div>
        <!-- 搜索 -->
        <van-search v-model="searchKey" placeholder="商家搜索" />
        <!-- 排序 -->
        <mallSort @sort="onClickNewSort" />
        <!-- <div class="select-wrap text-normal">
            <div class="select-box grey-color">
                <wx-picker :range="sortOptions" range-key="text" :value="sortIndex" mode="selector" @change="onChangeSort" @cancel="onCancelSort">
                    <div class="select" :class="{ 'primary-color bor-bottom': selectType === 'sort'}">
                        <span class="text">{{selectName ? selectName : '排序'}}</span>
                        <span class="icon" :class="{ 'invert primary-color': selectType === 'sort'}">&#xeb6d;</span>
                    </div>
                </wx-picker>
                <div class="select" :class="{ 'primary-color bor-bottom': selectType === 'select'}" @click="onClickSelectType">
                    <span class="text">筛选</span>
                    <span class="icon" :class="{ 'invert primary-color': selectType === 'select'}">&#xeb6d;</span>
                </div>
                <div class="options-box text-normal" catchtouchmove="move" v-if="selectType">
                    <div class="white-bg" v-if="selectType === 'sort'">
                        <div class="item clearfix" :class="{ 'primary-color': selectValue === item }" @click="onClickSelectValue(item)" v-for="(item, index) in sortOptions" :key="index">
                            <div class="fl">
                                {{item.name}}
                            </div>
                            <div class="icon fr" v-if="selectValue === item">&#xe633;</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <!--  -->
        <div class="goods-box" style="padding-bottom:60rpx;padding-top:30rpx;">
            <div class="inner">
                <ShopListItem v-for="(shop, index) in shopList"
                    :key="index"
                    :container-class="['after-line']"
                    :name="shop.name"
                    :cover="shop.cover"
                    :tag="shop.tag"
                    :shop-id="shop.id"
                    :distance="shop.distance"
                    :phone="shop.phone"
                    :is-photography="shop.is_photography"
                    :good="shop.goods_number"
                    :pkg="shop.package_number"
                    :features="shop.features"
                    :starting-price="shop.starting_price"
                    :visitor-number="shop.visitor"
                    @click="onClickShop(shop)" />
            </div>
        </div>
        <ListEmpty v-if="shopList.length === 0" />

        <van-popup v-model="showKeywordSearch" class="search-popup" position="bottom">
            <div class="white-bg text-normal" v-if="selectType === 'select'">
                <div class="title">关键字搜索</div>
                <div class="input-box text-center">
                    <input type="text" v-model="searchKey" placeholder="输入关键字" class="input grey-bg" style="padding-left:28rpx;box-sizing:border-box;">
                </div>
                <div class="btn-box">
                    <div class="btn btn-mobile btn-block btn-white-red red-border" @click="onClickReset">重置</div>
                    <div class="btn btn-mobile btn-block btn-red" @click="onClickConfirm">确定</div>
                </div>
            </div>
        </van-popup>

        <BottomTab value="vip" />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import LineTitle from '@/components/common/lineTitle.vue';
import Banner from '@/components/common/banner.vue';
import TabBox from '@/components/common/tabBox.vue';
import ShopListItem from '@/features/shop/listItem.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import BottomTab from '@/components/nav/bottomTab.vue';

import mallSort from '@/features/shop/mallSort.vue';

import {
    api,
} from '@/lib/api';

import { Component, Vue, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ROUTE_NAME } from '@/lib/constant';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'BridalShopIndex',
    components: {
        LineTitle,
        Banner,
        TabBox,
        ShopListItem,
        ListEmpty,
        BottomTab,
        mallSort
    },
})
export default class BridalShopIndex extends Vue {
    public title: any = '';
    public category: any = '';
    public selectType: any = '';
    public selectValue: any = '';
    public selectName: any = '';
    public searchKey: any = '';  // 搜索
    public showKeywordSearch = false;

    // 切换分类
    public selectTabOneId: any = ''; // 选择的tab-id
    public selectOne: any = null;  // 选择tab-索引
    public isShowsliderTab = false;   // 显示展示全部商家
    public sortValue: any = '';  //新改的排序
    public sortName: any = '';  // 新改的排序

    /** 排序选项 */
    public sortOptions: ValueText[] = [
        { value: 'popularity', text: '综合排序' },
        { value: 'multiple', text: '高人气' },
        { value: 'good', text: '商品最多' },
    ];

    /** 当前是否正在onload请求 */
    public req: any = true;

    public get type() {
        return this.$route.query.type;
    }
    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get sortIndex() {
        return this.sortOptions.map((option) => option.value).indexOf(this.sortValue);
    }
    /** banners */
    public get indexBanners() {
        return store.state.shop.indexBanners;
    }

    // 分类
    public get getSliderList(){
        return store.state.shop.sliderList
    }

    /** 店铺列表 */
    public get shopListMap() {
        return store.state.shop.shopList;
    }

    /** 店铺详情 */
    public get shopMap() {
        return store.state.shop.shopMap;
    }

    public get tabs() {
        const name = ROUTE_NAME.SHOP_LIST;
        return [
            {
                icon: '&#xe7ba;',
                text: '婚纱摄影',
                to: { name, query: { type: '婚纱摄影' } },
            },
            {
                icon: '&#xe602;',
                text: '结婚首饰',
                to: { name, query: { type: '结婚首饰' } },
            },
            // {
            //     icon: '&#xe604;',
            //     text: '婚宴酒宴',
            //     to: { name, query: { type: '婚宴酒宴' } },
            // },
            {
                icon: '&#xe621;',
                text: '美妆护肤',
                to: { name, query: { type: '美妆护肤' } },
            },
            {
                icon: '&#xe666;',
                text: '礼服租售',
                to: { name, query: { type: '礼服租售' } },
            },
            // {
            //     icon: '&#xe6b3;',
            //     text: '婚宴喜酒',
            //     to: { name, query: { type: '婚宴喜酒' } },
            // },
        ];
    }
    public get key() {
        return `${this.category}_${this.sortValue}_${this.searchKey}`;
        // return `${this.category}_${this.selectValue}_${this.searchKey}`;
    }
    /** 店铺列表 */
    public get shopList() {
        const wrap = this.shopListMap[this.key] || {
            list: [],
            loaded: false,
            req: false,
        };
        return wrap.list.map((id: any) => this.shopMap[id]);
    }

    // public getProductList(forceUpdate = false) {
    //     return store.dispatch('good/getProductList', {
    //         offset: this.list.length,
    //         count: 10,
    //         sort: this.sortValue,
    //         screen: this.screen,
    //         forceUpdate,
    //         name: this.search,
    //     });
    // }

    @Watch('showKeywordSearch')
    public onShowKeywordSearch() {
        if (!this.showKeywordSearch) {
            this.selectType = '';
        }
    }

    public onClickSelectType(type: any) {
        this.showKeywordSearch = true;
        this.selectType = 'select';
    }
    /**
     * 修改sort
     */
    public onChangeSort(e: any) {
        const option = this.sortOptions[e.detail.value];
        if (option) {
            this.selectValue = option.value;
            this.selectName = option.text;
            this.selectType = '';
            this.searchKey = '';
        }
        this.getList();
        this.onCancelSort();
    }
    public onCancelSort() {
        this.selectType = '';
    }
    /**
     * 选择排序逻辑
     */
    // public onClickSelectValue(item: any) {
    //     this.selectValue = item.val;
    //     this.selectName = item.name;
    //     this.selectType = '';
    //     this.searchKey = '';
    //     this.getList();
    // }
    /**
     * 确认关键字
     */
    public onClickConfirm() {
        this.selectType = '';
        this.showKeywordSearch = false;
        this.getList();
    }
    /** 重置关键字 */
    public onClickReset() {
        this.searchKey = '';
        this.showKeywordSearch = false;
        this.getList();
    }
    // 展开更多分类
    public onClickOpenTab(){
        this.isShowsliderTab = !this.isShowsliderTab;
    }
    // 展开更多分类
    public onCalcelOpenTab(){
        this.isShowsliderTab = false;
    }
    /**
     * 切换分类
     */
    public onClickTab(_id,_index) {
        this.searchKey = '';
        this.selectTabOneId = _id;
        this.selectOne = _index;
        this.isShowsliderTab = false;

        this.getList();
    }
    // 新改的排序
    public onClickNewSort(e: any){
        // 添加排序字段
        this.sortValue = e.val;
        this.sortName = e.name;
        this.getList();
    }


    // 搜索商家
    // @WatchDelay('searchName', 500)
    @Watch('searchKey')
    public onName() {
        this.getList();
    }

    /**
     * 获取店铺列表
     */
    public async getList(offset = 0,isSwitchTab = true) {
        store.commit('utils/startRequest');
        await store.dispatch('shop/getShopList', {
            offset: this.shopList.length,
            count: 10,
            // sort: this.selectValue,
            sort: this.sortValue,
            search: this.searchKey,
            category: this.selectTabOneId == '全部商家'?'':this.selectTabOneId,

            // 新增
            isSwitchTab: isSwitchTab
        });
        store.commit('utils/endRequest');
    }

    public async onClickShop(shop: Shop.ListItem) {
        // api.navigateTo({
        //     url: '/pages/shop_bridal/main',
        //     query: {
        //         shop_id: shop.id,
        //     },
        // });
        // api.push({
        //     name: ROUTE_NAME.SHOP_BRIDAL,
        //     params: {
        //         shopId: shop.id + '',
        //     },
        // });
        if (shop.is_photography) {
            // api.navigateTo({
            //     url: '/pages/shop_bridal/main',
            //     query: {
            //         shop_id: shop.id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.SHOP_BRIDAL,
                params: {
                    shopId: shop.id + '',
                },
            });
        } else {
            // api.navigateTo({
            //     url: '/pages/shop_product/main',
            //     query: {
            //         shop_id: shop.id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.SHOP_PRODUCT,
                params: {
                    shopId: shop.id + '',
                },
            });
        }

    }
    public async onReachBottom() {
        await this.getList(this.shopList.length,false);
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('shop/getIndexBanners'),
            store.dispatch('utils/getPageConfig'),
            store.dispatch('shop/getShopList', {
                offset: 0,
                count: 10,
                sort: '',
                search: '',
                category: '',
                // 新增
                isSwitchTab: true
            }),
        ]);
        // 分类
        store.dispatch('shop/getSliderList',{
            pid:0,
            is_view_show:1
        }),
        store.commit('utils/endRequest');
        next();
    }
    public created() {
        window.addEventListener('reachbottom', this.onReachBottom);
        window.onShareAppMessage = (res) => {
            // return {
            //     title: '门店',
            //     imageUrl: '',
            //     path: `/pages/shop_list/main?referrer_id=${this.userBasicInfo.id}&type=${this.title}`,
            // };

            const url = this.$router.resolve({
                name: ROUTE_NAME.SHOP_LIST,
                query: {
                    referrer: this.userBasicInfo.id + '',
                    type: this.title,
                },
            }).route.fullPath;

            return {
                title: '门店',
                imageUrl: '',
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        }
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>
<style lang="less">

@import "../../lib/style/features/line.less";

.bridal-shop-index {
    padding-bottom: @height-tabbar;

    // 分类
    .classification_tabBox{
        position: relative;
        width: 100%;
    }
    // 滑动tab
    .classification{
        width: 100%;
        height: 70rpx;
        display: flex;
        border-bottom: 1rpx solid #E9E9E9;
        // margin-bottom: 20rpx;
    }
    .classification_slideBox{
        width: 80%;
        height: 60rpx;
        display: flex;
        justify-content: end;
        overflow: hidden;
        overflow-x: scroll;
    }
    .classification_slideBox_item{
        position: relative;
        height: 60rpx;
        line-height: 60rpx;
        color: #7B7B7B;
        font-size: 28rpx;
        padding: 5rpx 6rpx;
        min-width: 140rpx;
        text-align: center;
    }
    .classification_slideBox_item_active{
        font-size: 32rpx;
        color: #FDD9DD;

        .classification_slideBox_item_activeIcon{
            position: absolute;
            top: 30rpx;
            right: 0rpx;
            width: 20rpx;
        }
    }
    .sliderBtn{
        width: 110rpx;
        display: flex;
        font-size: 24rpx;
        line-height: 26px;
        height: 50rpx;
        border-radius: 10rpx;
        padding-left: 10rpx;
        background-color: #FEAAAF;
        color: #ffffff;
        display: flex;
        font-size: 28rpx;
        margin-top: 6rpx;

        .sliderBtn_icon{
            width: 30rpx;
            height: 30rpx;
            margin: 10rpx 6rpx 0rpx 0rpx;
        }
    }
    // 分类全部xianshi
    .sortBox_po{
        position: absolute;
        top: 72rpx;
        left: 0rpx;
        width: 100%;
        height: 100vh;
        background-color: #9999;
        z-index: 999;

        .sortBox_po_tabBox{
            width: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: end;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 20rpx 30rpx;

            .sortBox_po_tabBox_lump{
                width: 25%;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                color: #7B7B7B;
                font-size: 28rpx;
            }
            .classification_slideBox_item_active{
                font-size: 32rpx;
                color: #FDD9DD;

                .classification_slideBox_item_activeIcon{
                    position: absolute;
                    top: 30rpx;
                    right: 0rpx;
                    width: 20rpx;
                }
            }
        }
    }




    .hot-recommend {
        padding: 10px 26px;
        .content {
            margin-right: -10px;
            .item {
                width: 156px;
                height: 88px;
                margin-top: 10px;
                margin-right: 10px;
                box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
                border-radius: 10px;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }
    }
    .goods-box {
        // padding: 10px 15px;
        .inner {
            padding: 0 13px;
        }
    }

    .select-wrap {
        // padding-top: 20px;

        .select-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            .select {
                // padding-bottom: 10px;
                .text {
                    display: inline-block;
                    padding-bottom: 10px;
                    border-bottom: 1px solid transparent;
                }
                &.bor-bottom {
                    .text {
                        border-bottom: 1px solid @primary-color;
                    }
                }
                .icon {
                    display: inline-block;
                    margin-left: 5px;
                    font-size: 10px;
                    transition: transform .3s;
                }
                .invert {
                    transform-origin: center;
                    transform: rotateZ(-180deg);
                }
            }
            .options-box {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: calc(~"100vh - 100%");
                overflow-y: scroll;
                background: rgba(0, 0, 0, 0.55);
                z-index: 1;
            }
        }
    }
    .hot-recommend {
        padding: 0 26px 10px;
    }

    .search-popup {
        .title {
            padding-left: 10px;
            padding-top: 10px;
        }
        .input-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 25px;
            .input {
                display: inline-block;
                width: 264px;
                height: 34px;
                border-radius: 20px;
            }
        }
        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 25px;
            .btn {
                width: 150px;
                height: 32px;
                line-height: 32px;
                border-radius: 20px;
                overflow: hidden;
            }
        }
    }
}

</style>
